<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

<script setup lang="ts">
import { useI18n } from "vue-i18n";
import { computed, reactive, ref, onMounted, toRaw, watch } from 'vue'
import { ElMessage } from 'element-plus';

import { Greet, Log, ListKeys } from '../../wailsjs/go/main/App.js'

const myData = reactive({
    tableHeight:window.innerHeight-100,
    text1:"a",
    keyList:[
        {"key":"def", "remark":"todo", "key_type":"string"},
    ],
})

const { t } = useI18n();
const OnClick = () => {
    Log("btn click");

    ListKeys().then((result) => {
       myData.keyList = JSON.parse(result);
    });

    /*
    Greet(myData.text1).then((result) => {
        myData.text1 = result;
    });
    */
};

const OnSelect = (row, column, event) => {
    Log("click key:" + row["key"]);
};

const handleResize = () => {
    myData.tableHeight = window.innerHeight-20;
};

const handleClick = (row) => {
    Log("edit click" + JSON.stringify( row))
};

onMounted(async() => {
    Log("js onMounted");
    handleResize();
    window.addEventListener("resize", handleResize);

    OnClick();

    setTimeout(()=>{
    }, 1000);

})

</script>

<!--12 height="199"3
    <el-button @click="OnClick">Click</el-button>
    <el-main>
    </el-main>
-->

<template>
    <el-button>编辑</el-button>

    <el-table @row-click="OnSelect"
              :data="myData.keyList"
              :height="myData.tableHeight"
              ref="table1" >
        <el-table-column prop="key" label="key"> </el-table-column>
        <el-table-column prop="remark" label="备注" ></el-table-column>
        <el-table-column prop="key_type" label="类型" ></el-table-column>
        <el-table-column label="操作"
                         width="120">
            <template slot-scope="scope">
                <el-button>编辑</el-button>
            </template>

        </el-table-column>
    </el-table>

</template>

<!--

<el-container style="height: 500px; border: 1px solid #eee">
</el-container>

<el-input
        placeholder="请输入文本"
        v-model="myData.text1"
        width="50"
>
</el-input>

-->
